<template>
  <div class="material">
    <loading :show="loading" />
    <v-title title="线下商家" />
    <ul class="category">
      <li :class="{'active': item.id === current}" class="item" v-for="(item, index) in categoryList" :key="index" @click="handleCategory(item)">
        <div class="image" v-if="item.image && item.image.image">
          <img v-lazy="item.image.image.thumbnail_path" />
        </div>
        <div class="text">{{ item.name }}</div>
      </li>
    </ul>
    <ul class="list">
      <template v-for="(item, index) in list">
        <li
          class="list-item"
          :key="index"
          @click="handleMerchant(item)"
        >
          <div class="image" v-if="item.descImage && item.descImage[0] && item.descImage[0].image">
            <img v-lazy="item.descImage[0].image.thumbnail_path" />
          </div>
          <div class="text">{{ item.name }}</div>
          <div class="desc">{{ item.desc }}</div>
        </li>
      </template>
    </ul>
    <pull-up
      :loading="loading"
      :busy="queryList.busy"
      :data-len="list.length"
      @loadMore="loadMore" />
  </div>
</template>

<script>
import api from '@/api'
import base64 from '@/util/base64'
import Loading from '@/components/Loading'
import PullUp from '@/components/PullUp'
import Title from '@/components/Title'
export default {
  name: 'Material',
  components: {
    Loading,
    PullUp,
    'v-title': Title,
  },
  data() {
    return {
      loading: false,
      queryList: {
      },
      list: [],
      current: 0,
      categoryList: []
    }
  },
  methods: {
    loadMore() {
      setTimeout(() => {
        this.getList(true)
      }, 200)
    },
    init() {
      this.queryList = {
        page: 0,
        pageSize: 10,
        busy: false
      }
      this.list = []
    },
    getList(append = false) {
      if (this.queryList.busy === false) {
        this.loading = true
        this.queryList.page++
        this.loading = true
        this.queryList.busy = true
        api.Supplier.list({ ...this.queryList, category_id: this.current }).then(response => {
          let { data } = response
          data = base64.parse(data)
          if (data.list.length === 0) {
            this.queryList.busy = true
          } else {
            this.queryList.busy = false
            if (append) {
              this.list = this.list.concat(data.list)
            } else {
              this.list = data.list
            }
            // console.log(this.list)
          }
        }).finally(() => {
          this.loading = false
        })
      }
    },
    getIndex() {
      // 获取全部分类与默认商家
      api.Supplier.index().then(response => {
        let { data } = response
        data = base64.parse(data)
        const { merchant, category } = data
        this.categoryList = category
        this.list = merchant
        if (this.categoryList.length > 0) {
          // this.current = this.categoryList[0].id
        }
        console.log(this.list)
      })
    },
    handleCategory(item) {
      this.current = item.id
      this.init()
      this.getList()
    },
    handleMerchant(item) {
      this.$router.push(`/product/merchant-product/${item.id}`)
    }
  },
  created () {
    // this.init()
    // this.getList()
    this.getIndex()
  }
}
</script>

<style scoped lang="stylus">
.material
  padding-top 40px
  background $background_color
  .category
    //background red
    display flex
    flex-wrap wrap
    margin 10px
    //justify-content space-between
    justify-content start
    //background red
    .item
      width calc(25% - 10px)
      display flex
      flex-direction column
      justify-content space-between
      padding 0px
      margin 5px
      box-sizing border-box
      background white
      &.active
        border 1px solid #ccc
        border-radius 5px
      .image
        //background red
        //height 58px
        //img
        //  width 70px
        //  height 70px
        //  display block
        //  margin auto
      .text
        height 30px
        line-height 30px
        overflow hidden
  .list
    display flex
    flex-wrap wrap
    justify-content space-between
    margin 10px
    .list-item
      box-sizing border-box
      width 48%
      background white
      padding 10px
      border-radius 10px
      display flex
      flex-direction column
      align-items start
      line-height 1.2
      font-size 14px
      .text
        font-weight 700
        margin 10px 0
      .desc
        color #999
</style>
